﻿@inherits BaseComponent
@typeparam TItem where TItem : class, new()

<div class="kui-column-setting">
    <Dropdown Trigger="Triggers">
        <ChildContent>
            <KIcon Icon="setting" Title="@Language.TableColumnSetting" />
        </ChildContent>
        <Overlay>
            <div class="kui-card overlay kui-table-setting">
                <div class="title">
                    <AntCheckBox Label="@Language[Language.TableColumnShow]" Indeterminate="Indeterminate" Value="CheckAll" ValueChanged="CheckAllChangedAsync" />
                    <KButton Type="ButtonType.Link" Name="@Language.Reset" OnClick="OnReset" />
                </div>
                @if (HasFixedLeft) {
                    @RenderFixedItem(Language.FixLeft, LeftColumns)
                }
                <div class="columns">
                    @if (HasFixedLeft || HasFixedRight) {
                        <div class="title">@Language[Language.NotFixed]</div>
                        @foreach (var item in Columns) {
                            item.Label = Language.GetFieldName<TItem>(item);
                            @RenderItem(item)
                        }
                    } else {
                        foreach (var item in Columns) {
                            item.Label = Language.GetFieldName<TItem>(item);
                            @RenderItem(item)
                        }
                    }
                </div>
                @if (HasFixedRight) {
                    @RenderFixedItem(Language.FixRight, RightColumns)
                }
            </div>
        </Overlay>
    </Dropdown>
</div>

@code {
    RenderFragment RenderItem(ColumnInfo item) => @<div class="item" draggable="true" ondragover="event.preventDefault()" @ondrop="e=>OnDropAsync(e, item)" @ondragstart="e=>OnDragStart(e, item)">
        <KIcon Icon="pause" />
        <AntCheckBox Label="@Language[item.Label]" Value="item.IsVisible" ValueChanged="v=>OnVisibleChange(item,v)" />
        <AntInteger Value="item.Width" ValueChanged="v=>OnWidthChange(item,v)" />
        <div class="fixed">
            <AntIcon IsTheme Type="vertical-align-top" Title="@Language[Language.FixToLeft]" OnClick="e=>OnFixedChange(item, 1)" />
            <AntIcon IsTheme Type="vertical-align-bottom" Title="@Language[Language.FixToRight]" OnClick="e=>OnFixedChange(item, 2)" />
        </div>
    </div>;

    RenderFragment RenderFixedItem(string title, List<ColumnInfo> items) => @<div class="fixed">
        <div class="title">@Language[title]</div>
        <div class="items">
            @foreach (var item in items) {
                item.Label = Language.GetFieldName<TItem>(item);
                <div class="item">
                    <AntCheckBox Label="@Language[item.Label]" Value="item.IsVisible" ValueChanged="v=>OnVisibleChange(item,v)" />
                    <AntInteger Value="item.Width" ValueChanged="v=>OnWidthChange(item,v)" />
                    <div class="fixed">
                        <AntIcon IsTheme Type="vertical-align-middle" Title="@Language[Language.NotFixed]" OnClick="e=>OnFixedChange(item, 0)" />
                        @if (title == Language.FixLeft) {
                            <AntIcon IsTheme Type="vertical-align-bottom" Title="@Language[Language.FixToRight]" OnClick="e=>OnFixedChange(item, 2)" />
                        } else {
                            <AntIcon IsTheme Type="vertical-align-top" Title="@Language[Language.FixToLeft]" OnClick="e=>OnFixedChange(item, 1)" />
                        }
                    </div>
                </div>
            }
        </div>
    </div>;
}